<template>
  <div>
    <a-icon @click="addPredicate()" style="cursor: pointer;margin-left: 97%;color: #1890ff;" :title="$ti18('rxList.newBtn','添加')" type="plus"/>
    <a-table :bordered="true" :columns="predicateColumns"
             :dataSource="predicateList"
             :defaultExpandAllRows="true"
             :indentSize="40" :pagination="false">
      <template name="predicateName" slot="predicateName" slot-scope="text,record">
        <a-select style="width:100%" @change="changePredicateName(record)" :options="predicateOptions"
                  :allowClear="true" :getPopupContainer="p=>p.parentNode" v-model="record.predicateName"></a-select>
      </template>
      <template name="predicateArgs" slot="predicateArgs" slot-scope="text,record">
        <component ref="predicateArgs"
                   v-model="record"
                   :is="record.currentComponet">
        </component>
      </template>
      <template name="action" slot="action" slot-scope="text,record,index">
        <a-icon @click="delPredicate(index)" style="cursor: pointer;color:red;" :title="$ti18('rxList.delBtn','删除')" type="delete"/>
      </template>
    </a-table>
  </div>
</template>

<script>
  import PathEdit from './predicate/PathEdit'
  import MethodEdit from './predicate/MethodEdit'
  import DateEdit from './predicate/DateEdit'
  import CookieEdit from './predicate/CookieEdit'
  import HeaderEdit from './predicate/HeaderEdit'
  import HostEdit from './predicate/HostEdit'
  import QueryEdit from './predicate/QueryEdit'
  import RemoteAddrEdit from './predicate/RemoteAddrEdit'

  export default {
    name: "predicateList",
    components: {
      PathEdit,
      MethodEdit,
      DateEdit,
      CookieEdit,
      HeaderEdit,
      HostEdit,
      QueryEdit,
      RemoteAddrEdit
    },
    props: ["predicates"],
    data() {
      return {
        predicateColumns: [
          {
            title: this.i18n('form.conditionName','条件名称'),
            dataIndex: 'predicateName',
            key: 'predicateName',
            width: 150,
            scopedSlots: {customRender: 'predicateName'},
          },
          {
            title: this.i18n('form.param','参数'),
            dataIndex: 'predicateArgs',
            key: 'predicateArgs',
            width: 250,
            scopedSlots: {customRender: 'predicateArgs'},
          },
          {
            title: this.$ti18('rxList.action','操作'),
            dataIndex: 'action',
            width: 30,
            scopedSlots: {customRender: 'action'}
          }
        ],
        predicateOptions: [
          {value: "Path", label: this.i18n('predicate.path','路径')},
          {value: "Before", label: this.i18n('predicate.before','指定日期之前')},
          {value: "After", label: this.i18n('predicate.after','指定日期之后')},
          {value: "Between", label: this.i18n('predicate.between','指定日期之间')},
          {value: "Cookie", label: "Cookie"},
          {value: "Header", label: this.i18n('predicate.header','请求头')},
          {value: "Host", label: "Host"},
          {value: "Method", label: this.i18n('predicate.method','HTTP请求方法')},
          {value: "Query", label: "Query"},
          {value: "RemoteAddr", label: this.i18n('predicate.remoteAddr','请求IP')}
        ],
        predicateList: []
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      i18n(name,text,key){
          return this.$ti18(name,text,"SysRouting",key);
      },
      init() {
        const {predicates} = this;
        if (predicates&&predicates.length > 0){
            for (var i = 0; i < predicates.length; i++) {
              var currentComponet=predicates[i].name+"Edit";
              if(predicates[i].name=="Before"||predicates[i].name=="After"||predicates[i].name=="Between"){
                currentComponet=DateEdit;
              }
              this.predicateList.push({
                predicateName: predicates[i].name,
                predicateArgs: predicates[i].args,
                currentComponet:currentComponet
              });
            }
        }
      },
      addPredicate() {
        this.predicateList.push({
          predicateName: "",
          predicateArgs: "",
          currentComponet:PathEdit
        });
      },
      delPredicate(index) {
        this.predicateList.splice(index, 1);
      },
      changePredicateName(record) {
        if(record.predicateName){
          if(record.predicateName=="Before"||record.predicateName=="After"||record.predicateName=="Between"){
            record.currentComponet=DateEdit;
          }else {
            record.currentComponet = record.predicateName+"Edit";
          }
        }else {
          record.currentComponet=PathEdit;
        }
        if (record.predicateName=="Method"){
          record.predicateArgs = [];
        }else {
          record.predicateArgs = "";
        }
      }
    },
    watch:{
      predicates:function (val,oldval) {
        this.init();
      }
    }

  }
</script>

<style scoped>
</style>